<template>
	<view class="mvtk-certificateLevel-box">
		<view class="title-box"> <span class="border"></span> 持证状况 <view class="action">单位：万人</view>
		</view>

		<div class="grid-box" id="main-certificateLevel" style='height: 350upx'></div>
	</view>
</template>

<script lang="ts" name="mvtkApi" setup>
import * as echarts from 'echarts'
import { ref, onMounted } from "vue"
const data = [
	{ value: 13322221, name: '一级' },
	{ value: 11222222, name: '二级' },
	{ value: 34222211, name: '三级' },
	{ value: 3422222, name: '四级' }
]

onMounted(() => {
	// 获取DOM元素并且进行初始化
	var myChart = echarts.init(document.getElementById('main-certificateLevel'));
	// 创建图标
	myChart.setOption(
		{
			grid: {
				left: '6',
				right: '6',
				top: '0',
				bottom: '30'
			},
			legend: {
				orient: 'vertical',
				right: '20',
				y: 'center',
				align: 'left',
				formatter: function (name) {
					let total = 0;
					let tarValue;
					for (let i = 0; i < data.length; i++) {
						total += data[i].value;
						if (data[i].name == name) {
							tarValue = data[i].value;
						}
					}
					return `${name}  ${(tarValue / 10000).toFixed(1)}`;
				}
			},

			series: [
				{
					type: 'pie',
					radius: [70, 50],
					center: ['32%', '50%'],
					itemStyle: {
						borderRadius: 6,
						borderColor: '#fff',
						borderWidth: 2,
						color: function (colors) {
							var colorList = ['#f39423', '#f9c78b', '#f5a544', '#fbdab2', '#f39423', '#f9c78b', '#f39423'];
							return colorList[colors.dataIndex];
						}
					},
					label: {
						show: false,
						position: 'center'
					},
					labelLine: {
						show: false
					},
					data: data
				}
			]
		}
	)
})



</script>



<style lang="scss" scoped>
@import url('../../../../common/css/certificateLevel.scss');
</style>

